﻿<%@ Page Title="" Language="C#" MasterPageFile="~/Site.master" AutoEventWireup="true" CodeFile="adddevice.aspx.cs" Inherits="Devices_AddDevice" %>


<asp:Content ID="Content1" ContentPlaceHolderID="Stylesheet" Runat="Server">
    <style>
        .td
        {
            width:150px;
            height:30px;
            padding-left:5px;
        }
    </style>
    
</asp:Content>

<asp:Content ID="java" ContentPlaceHolderID="Javascript" runat="server">
    <script type="text/javascript">
        $(document).ready(function () {
            $(":radio").change(function () {
                if ($(".customRadio:first").is(":checked")) {
                    $("#customMaxVOptions").slideDown(250);
                }
                else {
                    $("#customMaxVOptions").slideUp(250);
                }
                showPrice();
            });

            $("select").change(function () {
                showPrice();
            });

            showPrice();
        });

        function showPrice() {

            var price;
            var cpuCount;
            var diskSpaceCount;
            var memoryCount

            if ($(".customRadio:first").is(":checked")) {
                cpuCount = $(".cpuDropDown:first").val();
                diskSpaceCount = $(".diskSpaceDropDown:first").val();
                memoryCount = $(".memoryDropDown:first").val();
            }
            else {
                if ($(".planA:first").is(":checked")) {
                    cpuCount = 1;
                    diskSpaceCount = 30;
                    memoryCount = 1000;
                }
                else if ($(".planB:first").is(":checked")) {
                    cpuCount = 2;
                    diskSpaceCount = 40;
                    memoryCount = 2000;
                }
                else if ($(".planC:first").is(":checked")) {
                    cpuCount = 4;
                    diskSpaceCount = 60;
                    memoryCount = 4000;
                }
            }

        }

        function ShowPriceSucceededCallback(result) {

            $("#customPrice").val("$" + formatCurrency(result.Cost) + " /mo");
            $("#pricingLi").text("Your monthly fee will be $" + formatCurrency(result.Cost) + ". You will be billed a prorated fee of $" + formatCurrency(result.ProratedCost) + " for the time period between now and your next billing date of " + result.NextBillingDate + ".");

            function formatCurrency(num) {
                num = isNaN(num) || num === '' || num === null ? 0.00 : num;
                return parseFloat(num).toFixed(2);
            }
        }

        function ShowFailureCallback() {
            $("#pricingLi").text("Sorry, we are unable to calculate the cost of this item. Please contact sales for more information");
        }
</script>
</asp:Content>

<asp:Content ID="Content2" ContentPlaceHolderID="SubNavigation" Runat="Server">
    <ul>
        <li class="first">
            <asp:HyperLink ID="lnkOverview" NavigateUrl="~/Server/Device/default.aspx" runat="server">Overview</asp:HyperLink>
        </li>
        <li class="last">
            <asp:HyperLink ID="lnkAccountInformation" NavigateUrl="#" runat="server">Add Cloud Server</asp:HyperLink>
        </li>
    </ul>
</asp:Content>


<asp:Content ID="Content3" ContentPlaceHolderID="PageHeader" Runat="Server">
    <asp:Label ID="Label1" Text="Add Cloud Server" Font-Size="X-Large" runat="server"></asp:Label>
</asp:Content>

<asp:Content ID="Content4" ContentPlaceHolderID="MainContent" Runat="Server">



<div style="float:left; width:100%">
<div style="width:70%; float:left">
    <p>We offer Cloud Servers powered by Microsoft Hyper-V to provide an alternative to our Dedicated Server offerings. Each Cloud Server
    <br />
    performs and behaves exactly like a stand-alone server for both users and applications.<br />
    </p>

<asp:DataList ID="dlPlan" runat="server" Width="100%">
        
        <HeaderTemplate>
            <table style="padding-left:5px">
                <tr>
                    <td class="td">
                        <asp:Label ID="Label2" runat="server" Font-Bold="true" Text="Available Plan Types"></asp:Label></td>
                    <td class="td">
                        <asp:Label ID="Label3" runat="server" Font-Bold="true" Text="vCPUs"></asp:Label></td>
                    <td class="td">
                        <asp:Label ID="Label4" runat="server" Font-Bold="true" Text="RAM"></asp:Label></td>
                    <td class="td">
                        <asp:Label ID="Label7" runat="server" Font-Bold="true" Text="Disk Quota"></asp:Label></td>
                    <td class="td">
                        <asp:Label ID="Label8" runat="server" Font-Bold="true" Text="Bandwidth"></asp:Label></td>
                    <td class="td">
                        <asp:Label ID="Label9" runat="server" Font-Bold="true" Text="Monthly Fee"></asp:Label></td>
                </tr>
            
        </HeaderTemplate>
        <ItemTemplate>
        <tr>
            <td class="td"><asp:Label ID="PlanNameLabel" Font-Bold="true" runat="server" Text='<%# Eval("Name") %>' /></td>

            <td class="td"><asp:Label ID="vCPULabel" runat="server" Text='<%# Eval("CPUs") %>' /></td>

            <td class="td"><asp:Label ID="RAMLabel" runat="server" Text='<%# Eval("RAM") %>' /></td>

            <td class="td"><asp:Label ID="DistQuotaLabel" runat="server" Text='<%# Eval("DiskQuota") %>' /></td>

            <td class="td"><asp:Label ID="BandWidthLabel" runat="server" Text='<%# Eval("BandWidth") %>' /></td>

            <td class="td"><asp:Label ID="MonthlyFeeLabel" runat="server" Text='<%# "$"+Eval("MonthlyFee")+"/ Month" %>' /></td>
        </tr>
        </ItemTemplate>
        <FooterTemplate>
        </table>
        </FooterTemplate>
        
    </asp:DataList>
    <br />
    <asp:Label ID="Label10" runat="server" Font-Bold="True" Font-Size="Small" 
        Text="Step 1: Select a Plan"></asp:Label>
    <br /><hr />
        <asp:RadioButtonList ID="radListPlans" runat="server"  AutoPostBack="true" 
        onselectedindexchanged="radListPlans_SelectedIndexChanged" CellSpacing="5">
        <asp:ListItem Value="99">Plan A ($99.00 / mo)</asp:ListItem>
        <asp:ListItem Value="178">Plan B ($178.00 / mo)</asp:ListItem>
        <asp:ListItem Value="336">Plan C ($336.00 / mo)</asp:ListItem>
        <asp:ListItem Value="0">Custom Plan</asp:ListItem>
        </asp:RadioButtonList>
            

    

    <div id="divCustomOption" runat="server" visible="false" style="width: 100%; float: left">
        <asp:Label ID="Label11" runat="server" Text="Custom Options"></asp:Label>
        <br />
        <div id="Option" style="float: left; width: 100%" align="left">
            <div id="vCPU" style="width: 150px; float: left; padding-left: 4px; height: 30px">
                <asp:DropDownList ID="ddlCpu" runat="server" CssClass="textbox" Width="150px" 
                    AutoPostBack="True" onselectedindexchanged="ddlCpu_SelectedIndexChanged">
                </asp:DropDownList>
            </div>
            <div id="RAM" style="width: 150px; float: left; padding-left: 4px; height: 30px">
                <asp:DropDownList ID="ddlMemory" runat="server" CssClass="textbox" 
                    Width="150px" AutoPostBack="True" 
                    onselectedindexchanged="ddlMemory_SelectedIndexChanged">
                </asp:DropDownList>
            </div>
            <div id="DiskQuota" style="width: 150px; float: left; padding-left: 4px; height: 30px">
                <asp:DropDownList ID="ddlDiskPlace" runat="server" CssClass="textbox" 
                    Width="150px" AutoPostBack="True" 
                    onselectedindexchanged="ddlDiskPlace_SelectedIndexChanged">
                </asp:DropDownList>
            </div>
            <div id="Div5" style="width: 150px; float: left; padding-left: 4px; height: 30px">
                <asp:TextBox ID="txtPrice" runat="server" BorderStyle="Solid" CssClass="textbox"
                    Height="25px" Width="100px" BorderWidth="1px" Enabled="False"></asp:TextBox>
            </div>
        </div>
        <div id="Div1" style="float: left; width: 100%" align="left">
            <div id="Div2" style="width: 150px; float: left; padding-left: 4px">
                <asp:Label ID="Label13" runat="server" Text="CPU" Font-Size="Smaller"></asp:Label>
            </div>
            <div id="Div3" style="width: 150px; float: left; padding-left: 4px">
                <asp:Label ID="Label12" runat="server" Text="RAM" Font-Size="Smaller"></asp:Label>
            </div>
            <div id="Div4" style="width: 150px; float: left; padding-left: 4px">
                <asp:Label ID="Label14" runat="server" Text="Disk Quota" Font-Size="Smaller"></asp:Label>
            </div>
            <div id="Div6" style="width: 150px; float: left; padding-left: 4px">
                <asp:Label ID="Label5" runat="server" Text="Price" Font-Size="Smaller"></asp:Label>
            </div>
        </div>
    </div>
    <br />
    <br />
    <asp:Label ID="Label15" runat="server" Font-Bold="True" Font-Size="Small" 
        Text="Step 2: Select an Operating System"></asp:Label><br /><hr />
    
        
    <asp:Label ID="Label16" runat="server" 
        Text="Select the Operating System to be installed on your new device"></asp:Label>
    <br />
                <asp:DropDownList ID="ddlOS" runat="server" CssClass="textbox" 
                    Width="250px" 
        onselectedindexchanged="ddlOS_SelectedIndexChanged">
                </asp:DropDownList>
    <br />
    <br />
    <asp:Label ID="Label6" runat="server" Font-Bold="True" Font-Size="Small" 
        Text="Step 3: Review total cost"></asp:Label><br /><hr />
        
    <br />
    <ul class="formContents" 
        style="margin: 0px 0px 1em; padding: 0px; list-style: none; line-height: 15.850000381469727px; color: rgb(51, 51, 51); font-family: 'Segoe UI', arial, helvetica, clean, sans-serif; font-size: 13px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; orphans: 2; text-align: left; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px; background-color: rgb(255, 255, 255);">
        <li id="pricingLi" 
            style="margin: 0px 0px 1em; padding: 0px; line-height: 1.22em; clear: both;">
            Your monthly fee will be 
            <asp:Label ID="lblPriceTotal" runat="server" Text="$0"></asp:Label>
            . You will be billed a prorated fee of
            <asp:Label ID="lblPriceOfWeek" runat="server" Text="$0"></asp:Label>
&nbsp;for the time period between now and your next billing date of
            <asp:Label ID="lblNextDate" runat="server" Text="dd/MM/yyyy"></asp:Label>
        </li>
    </ul>
    <asp:Button ID="btnRequest" runat="server" Height="30px" 
        Text="Request New Cloud Server" onclick="btnRequest_Click" />
    <br />
    <asp:Label ID="lblMessage" runat="server" ForeColor="Red" 
        Text="Your request has been sent to administrator !!!" Visible="False"></asp:Label>
    <br class="Apple-interchange-newline" />
    </div>
    <div style="border-left:1px solid gray; min-height:500px; margin-left:5px; width:25%; float:left">
    </div>
</div>
</asp:Content>

<asp:Content ID="Content5" ContentPlaceHolderID="SideBar" Runat="Server">
    
</asp:Content>